<template>
  <li class="todoItem">
    <input class="chkbox" type="checkbox" :checked = "todo.done" @change = "toggleTodo"/>
    <label class="label">
      <input type="text" v-focus="editting" v-if="editting" :value="todo.text" @blur="editTodo" @keyup.enter="editTodo" @keyup.esc="editting = false">
      <span v-else v-text="todo.text" @dblclick ="editting = true"></span>
    </label>
    <a class="button box" @click="delTodo">
      <svg-icon iconClass="close"></svg-icon>
    </a>
  </li>
</template>

<script>
    export default {
      name: "todoItem",
      props:{
         todo: {
           type: Object,
           required: true
         }
      },
      data: function(){
        return {
          editting: false
        }
      },
      methods:{
        delTodo: function () {
          this.$emit('delete', {todo: this.todo})
        },
        editTodo: function (event) {
          let text = event.target.value.trim()
          if(!text){
            this.delTodo()
          } else {
            this.$emit('edit', {todo: this.todo, text: text})
          }
          this.editting = false
        },
        toggleTodo: function (event) {
          this.$emit('toggle', {todo: this.todo, checked: event.target.checked})
        }
      },
      directives: {
        focus: {
          bind: function (el, {value}, {context}) {
            console.log('bind')
          },
          inserted: function (el, {value}, {context}) {
            console.log('inserted')
            el.focus()
          },
          update: function (el, {value}, {context}) {
            console.log('update')
          },
          componentUpdated: function (el, {value}, {context}) {
            console.log('componentUpdated')
          },
          unbind: function (el, {value}, {context}) {
            console.log('unbind')
          }
        }
      }
    }
</script>

<style lang="scss" scoped>
  .todoItem{
    font-size: 14px;
    line-height: 44px;
    border-bottom: 1px solid #ededed;

    cursor: pointer;
    position: relative;

    .chkbox{
      position: absolute;
      left: 0;
      top: 0;
      width: 44px;
      height: 44px;
      opacity: 0;

      &:checked + label{
        text-decoration: line-through;
        color: #d9d9d9;

        background-size: 36px;
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
      }
    }
    .label{
      color: #4d4d4d;
      font-weight: 700;

      display: block;
      padding-left: 44px;
      padding-right: 44px;

      /*
        Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
        IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
      */
      background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
      background-repeat: no-repeat;
      background-position: center left;
      background-size: 36px;

      input{
        width: 100%;
        line-height: 1.5;
        border: 1px solid #409EFF;
      }
      span{
        width: 100%;
        line-height: 1.5;
        display: inline-block;
      }
    }
    .text{
      margin: 0 44px;

      font-size: 14px;
      font-weight: 700;
    }
    .button{
      display: block;
      position: absolute;
      right: 0;
      top: 0;

      color: #cc9a9a;
      width: 44px;

      font-size: 30px;
      text-align: center;

      opacity: 0;
      transition: opacity 0.5s ease;
    }
    &:hover{
      .button{
        opacity: 1;
      }
    }
  }
</style>
